<template>
  <div class="app-container">
    <div class="ele-table-tool-default">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRow">新增记录</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="120"
      />
      <el-table-column
        prop="starttime"
        label="计划启动时间"
        align="center"
        min-width="160"
      />
      <el-table-column
        prop="content.systemSet.irrAmount"
        label="亩灌溉量(m³)"
        align="center"
        min-width="160"
      />
      <el-table-column
        prop="content.systemSet.direction"
        label="方向"
        align="center"
      >
        <template #default="scope">
          {{ getDirection(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="执行状态"
        align="center"
      >
        <template #default="scope">
          <el-tag v-if="+scope.row.status === 0" type="danger">待执行</el-tag>
          <el-tag v-else type="success">已执行</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        align="center"
        width="200"
      >
        <template #default="scope">
          <el-link type="primary" icon="el-icon-edit" size="mini" class="mr12" @click="editRow(scope.row)">修改</el-link>
          <el-link type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <auto-main-form ref="mainForm" :areas="areas" @submit="submit" />
  </div>
</template>

<script>
import AutoMainForm from './auto-main-form'
import { getAll, addOne, deleteOne, updateOne } from '@/api/wsgAutoIrr'
import { getOne as getAreas } from '@/api/wsgArea'
import { deepClone } from '@/utils'
export default {
  components: {
    AutoMainForm
  },
  props: {
    serialno: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      tableData: [],
      areas: []
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.getAll()
      this.getAreas()
      this.$refs.mainForm.reset()
    },
    getDirection(row) {
      const value = row.content && row.content.systemSet && row.content.systemSet.direction || 0
      return { 1: '正向', 2: '反向' }[+value] || '--'
    },
    async getAreas() {
      const { data } = await getAreas(this.serialno)
      this.areas = data.content || []
    },
    async getAll() {
      const { data } = await getAll(this.serialno)
      this.tableData = data
    },
    async addOne(formData) {
      const { msg } = await addOne(formData)
      this.getAll()
      this.$message.success(msg)
      this.$refs.mainForm.hide()
    },
    async updateOne(formData) {
      const { msg } = await updateOne(formData.id, formData)
      this.getAll()
      this.$message.success(msg)
      this.$refs.mainForm.hide()
    },
    async deleteOne(row) {
      const { msg } = await deleteOne(row.id)
      this.$message.success(msg)
      this.getAll()
    },
    submit(formData) {
      if (formData.id) {
        this.updateOne(formData)
      } else {
        this.addOne(formData)
      }
    },
    addRow() {
      this.$refs.mainForm.show({ serialno: this.serialno })
    },
    deleteRow(row) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteOne(row)
        })
        .catch(() => {
          console.log('cancel')
        })
    },
    editRow(row) {
      this.$refs.mainForm.show(deepClone(row))
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
